<template>
  <div class="categorySet">
    <!-- 顶部 -->
    <div class="main-t">
      <!-- 导航栏 -->
      <div class="banner">
        <van-nav-bar>
          <template #left>
            <van-icon name="arrow-left" color="black" @click="back" />
          </template>
          <template #title>
            <van-tabs v-model:active="active" @click-tab="changeCategoryList($event)" type="card" color="rgb(46,53,72)">
              <van-tab title="支出分类"></van-tab>
              <van-tab title="收入分类"></van-tab>
            </van-tabs>
          </template>
        </van-nav-bar>
      </div>
    </div>
    <!-- 中部 -->
    <div class="main-c">
      <!-- 列表 -->
      <div class="category">
        <!-- 折叠面板 -->
        <van-collapse v-model="activeNames" accordion>
          <van-collapse-item v-for="(mcCategory, index) in categoryListA" :key="mcCategory.id"
            v-if="changeCategoryListVal == '0'" :title="mcCategory.text" :name="mcCategory.id" ref="collapseItemA">
            <!-- 标题 -->
            <template #title>
              <div class="category-title">
                <!-- 设置 -->
                <div class="setting" @click="setting(0, index)">
                  <van-icon name="setting-o" size="20" />
                </div>
                <div class="category-icon" @click="changeCategory(mcCategory)">
                  <van-image :src="mcCategory.icon"></van-image>
                </div>
                <div class="category-text">{{ mcCategory.text }}</div>
              </div>
            </template>
            <!-- 子分类 -->
            <div class="scCategory">
              <div class="category-item" v-for="scCategory in mcCategory.subCategoryList" :key="scCategory.id">
                <div class="category-icon" @click="changeSubCategory(mcCategory,scCategory)">
                  <van-image :src="scCategory.icon"></van-image>
                </div>
                <div class="category-text">{{ scCategory.text }}</div>
              </div>
              <!-- 添加子分类 -->
              <div class="category-item  addsc-title">
                <div class="category-icon" @click="addSubCategory(mcCategory)">
                  <van-image :src="addSubCategoryVal.icon"></van-image>
                </div>
                <div class="category-text">{{ addSubCategoryVal.text }}</div>
              </div>
            </div>
          </van-collapse-item>

          <van-collapse-item v-for="(mcCategory, index) in categoryListB" :key="mcCategory.id"
            v-if="changeCategoryListVal == '1'" :title="mcCategory.text" :name="mcCategory.id" ref="collapseItemB">
            <!-- 标题 -->
            <template #title>
              <div class="category-title">
                <!-- 设置 -->
                <div class="setting" @click="setting(1, index)">
                  <van-icon name="setting-o" size="20" />
                </div>
                <div class="category-icon" @click="changeCategory(mcCategory)">
                  <van-image :src="mcCategory.icon"></van-image>
                </div>
                <div class="category-text">{{ mcCategory.text }}</div>
              </div>
            </template>
            <!-- 在这里显示子分类 -->
            <div class="scCategory">
              <div class="category-item" v-for="scCategory in mcCategory.subCategoryList" :key="scCategory.id">
                <div class="category-icon" @click="changeSubCategory(mcCategory,scCategory)">
                  <van-image :src="scCategory.icon"></van-image>
                </div>
                <div class="category-text">{{ scCategory.text }}</div>
              </div>
              <!-- 添加子分类 -->
              <div class="category-item  addsc-title">
                <div class="category-icon" @click="addSubCategory(mcCategory)">
                  <van-image :src="addSubCategoryVal.icon"></van-image>
                </div>
                <div class="category-text">{{ addSubCategoryVal.text }}</div>
              </div>
            </div>
          </van-collapse-item>
        </van-collapse>
      </div>
    </div>
    <!-- 底部 -->
    <div class="main-b">
      <div class="fixedBtn" @click="addMainCategory()">添加分类</div>
    </div>
    <!-- 弹出层 -->
    <van-popup v-model:show="settingShow" position="bottom" round :style="{ padding: '64px' }">
      <div class="setting-popup">
        <div class="title">更多</div>
        <div class="funList">
          <div class="funItem" @click="addSubCategory(changeSettingCategory)"
            v-if="changeSettingCategory.subCategoryList">
            <div class="funText">
              <div class="funTitle">添加子分类</div>
            </div>
            <div class="funIcon"><van-icon name="arrow" color="rgb(206, 206, 206)" /></div>
          </div>
          <div class="funItem" @click="editMainCategory(changeSettingCategory)">
            <div class="funText">
              <div class="funTitle">编辑分类</div>
              <div class="funTag">{{ ' [ ' + (changeSettingCategory.text) + '] 分类' }}
              </div>
            </div>
            <div class="funIcon"><van-icon name="arrow" color="rgb(206, 206, 206)" /></div>
          </div>
          <div class="funItem">
            <div class="funText">
              <div class="funTitle">删除分类</div>
              <div class="funTag">校验是否存在账单</div>
            </div>
            <div class="funIcon"><van-icon name="arrow" color="rgb(206, 206, 206)" /></div>
          </div>
          <div class="funItem">
            <div class="funText">
              <div class="funTitle">删除分类</div>
              <div class="funTag">无需校验是否存在账单</div>
            </div>
            <div class="funIcon"><van-icon name="arrow" color="rgb(206, 206, 206)" /></div>
          </div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script setup lang="ts" name="CategorySet">
// 分类设置
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import useCategory from '@/hooks/useCategory'
import type { Category } from '@/hooks/useCategory' // 导入类型

// 分类数据
let { categoryListA, categoryListB, addSubCategoryVal } = useCategory()

const router = useRouter()

// ref 标识 collapseItem
let collapseItemA = ref()
let collapseItemB = ref()

// 显示设置窗口
let settingShow = ref(false)

const active = ref(0) // van-tab 选中标签

const activeNames = ref('1') // 折叠面板

// 被选中设置的分类
let changeSettingCategory: any

// 被选中的分类列表
let changeCategoryListVal = ref('0')

// 切换分类列表
function changeCategoryList(value: any) {
  changeCategoryListVal.value = value.name
}

// 被选中的分类
let changeCategoryVal = reactive(categoryListA[0])

// 选中分类
function changeCategory(category: Category) {
  console.log('选中主分类', category)
}

// 选中子分类
function changeSubCategory(mainCategory: Category,subCategory: Category) {
  console.log('选中子分类', subCategory)
  // 为子分类添加上父分类名称
  subCategory.mcText = mainCategory.text
  changeSettingCategory = subCategory
  // 打开设置窗口
  settingShow.value = true
}

// 添加主分类
function addMainCategory() {
  router.push({
    path: '/editCategory',
    query: { type: 0 }
  })
}

// 添加子分类
function addSubCategory(category: any) {
  console.log(category)
  router.push({
    path: '/editCategory',
    query: { type: 1, mainCategory: category.text }
  })
}

// 编辑 分类/子分类
function editMainCategory(category: any) {
  console.log("编辑分类", category)
  let type = 2
  // 区分 主类/子类
  if (category.subCategoryList == undefined) {
    type = 3
  }

  router.push({
    path: '/editCategory',
    query: {
      type: type,
      categoryName: category.text,
      mainCategory: category.mcText
    }
  })
}

// 返回上一级
function back() {
  router.go(-1)
}

// 设置 index 当前设置的索引
function setting(type: number, index: number) {
  // 整个组件被点击都会打开，无法设置，默认打开，点到setting再关闭
  if (type) {
    collapseItemB.value[index].toggle(false)
    // 当前打开设置弹出层的分类
    changeSettingCategory = categoryListB[index]
  } else {
    collapseItemA.value[index].toggle(false)
    // 当前打开设置弹出层的分类
    changeSettingCategory = categoryListA[index]
  }
  console.log(index)
  console.log(changeSettingCategory)

  // 打开设置窗口
  settingShow.value = true
}

</script>

<style scoped lang="less">
@gabelMargin : 20px; // 全局margin
@gabelBgColor : rgb(181, 202, 161);
@garyFontColor : rgb(125, 125, 125);

.categorySet {
  position: relative;
  height: 100vh;
}

.main-t {
  .banner {
    background-color: @gabelBgColor;
  }
}

.main-c {
  .category {
    // display: flex;
    // flex-wrap: wrap;
    // align-items: center;
    // margin-top: 20px;

    .category-title {
      display: flex;
      align-items: center;
    }

    .addsc-title {
      .category-icon {
        width: 80px;
        height: 80px;
      }
    }

    .scCategory {
      display: flex;
      flex-wrap: wrap;

      .category-item {
        margin: 10px 5px;
        width: 23%;
        display: flex;
        flex-direction: column;
        align-items: center;

        .category-text {
          text-align: center;
          margin: 0;
        }
      }
    }


    .category-icon {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100px;
      height: 100px;
      background-color: rgb(240, 240, 240);
      border-radius: 50%;
    }

    .category-text {
      font-size: 25px;
      margin-top: 10px;
      margin-left: 10px;
    }
  }

  .setting {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    padding-right: 10px;
    margin-left: -20px;
  }
}

.setting-popup {
  padding: 20px;
  font-size: 35px;

  .title {
    font-size: 40px;
    font-weight: 600;
    text-align: center;
  }

  .funList {
    .funItem {
      display: flex;
      align-items: center;
      padding: 0 20px;

      padding-bottom: 30px;
      margin-top: 30px;
      border-bottom: 1px solid rgb(206, 206, 206);

      .funText {
        width: 95%;

        .funTag {
          font-size: 30px;
          color: @garyFontColor;
        }
      }
    }

    .funItem:last-child {
      border: none;
    }
  }
}
</style>